<template>
  <div>
    <h1>【aty-time-picker】 component demo</h1>
    <p>【aty-time-picker】 本质</p>
    <aty-row class="fd-time-picker">
      <aty-title level="4">1.aty-time-picker  default 状态 </aty-title>
      <aty-panel>设置属性 type 为 time 或 timerange 分别显示选择单个时间和选择范围时间类型。 <br />
        设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-time-picker type="time" placeholder="选择时间" style="width: 168px" />
        </aty-col>
        <aty-col span="12">
          <aty-time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 200px" />
        </aty-col>
      </aty-row>
      <aty-title level="4">2.aty-time-picker  时间格式  </aty-title>
      <aty-panel>设置属性 format 可以改变时间的显示格式，详见  Date。 <br />
        注意，format 只是改变显示的格式，并非改变 value 值。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-time-picker :value="value1"
                           format="HH点mm分ss秒"
                           placeholder="选择时间"
                           style="width: 168px" />
        </aty-col>
        <aty-col span="12">
          <aty-time-picker :value="value2"
                           format="HH’mm’ss"
                           type="timerange"
                           placement="bottom-end"
                           placeholder="选择时间"
                           style="width: 168px" />
        </aty-col>
      </aty-row>

      <aty-title level="4">3.aty-time-picker  选择时分  </aty-title>
      <aty-panel>组件浮层中的列会随着 format 变化，当略去 format 中的秒时，浮层中对应的列也会消失。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-time-picker format="HH:mm"
                           placeholder="选择时间"
                           style="width: 112px" />
        </aty-col>
        <aty-col span="12">
          <aty-time-picker format="HH:mm"
                           type="timerange"
                           placement="bottom-end"
                           placeholder="选择时间"
                           style="width: 168px" />
        </aty-col>
      </aty-row>

      <aty-title level="4">4.aty-time-picker  不可选时间  </aty-title>
      <aty-panel>可以使用 disabled-hours disabled-minutes disabled-seconds 组合禁止用户选择某个时间。<br />
        使用 hide-disabled-options 可以直接把不可选择的项隐藏。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-time-picker :disabled-hours="[1,5,10]"
                           :disabled-minutes="[0,10,20]"
                           placeholder="选择时间"
                           style="width: 168px" />
        </aty-col>
        <aty-col span="12">
          <aty-time-picker hide-disabled-options
                           :disabled-hours="[1,5,10]"
                           :disabled-minutes="[0,10,20]"
                           placeholder="选择时间"
                           style="width: 168px" />
        </aty-col>
      </aty-row>

      <aty-title level="4">5.aty-time-picker  带有确认操作   </aty-title>
      <aty-panel>设置属性 confirm，选择器会有清空和确定按钮。 <br />
        确认按钮并没有影响时间的正常选择。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-time-picker confirm placeholder="选择时间" style="width: 168px" />
        </aty-col>
        <aty-col span="12">
          <aty-time-picker confirm type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px" />
        </aty-col>
      </aty-row>

      <aty-title level="4">6.aty-time-picker  手动控制组件   </aty-title>
      <aty-panel>对于一些定制化的场景，可以使用 slot 配合参数 open confirm 及事件来手动控制组件的显示状态，详见示例和 API。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <a href="javascript:void(0)"
             @click="handleClick">
            <aty-icon type="ios-clock-outline" />
            <template v-if="value3 === ''">选择时间</template>
            <template v-else>{{ value3 }}</template>
          </a>
          <aty-time-picker :open="open"
                           :value="value3"
                           confirm
                           @change="handleChange"
                           @clear="handleClear"
                           @ok="handleOk" />
        </aty-col>
      </aty-row>

      <aty-title level="4">7.aty-time-picker  尺寸   </aty-title>
      <aty-panel>通过设置属性 size 为 large 或 small 可以调整选择器尺寸为大或小，默认不填为中。</aty-panel>
      <aty-row>
        <aty-col span="8">
          <aty-time-picker size="small" placeholder="选择时间" />
        </aty-col>
        <aty-col span="8">
          <aty-time-picker size="default" placeholder="选择时间" />
        </aty-col>
        <aty-col span="8">
          <aty-time-picker size="large" placeholder="选择时间" />
        </aty-col>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: '09:41:00',
      value2: ['09:41:00', '12:00:00'],
      open: false,
      value3: ''
    }
  },
  methods: {
    handleClick () {
      this.open = !this.open
    },
    handleChange (time) {
      this.value3 = time
    },
    handleClear () {
      this.open = false
    },
    handleOk () {
      this.open = false
    }
  }
}
</script>
<style   lang="less"  type="text/less" >
    /*出错*/
    .fd-time-picker {
        padding: 20px;
        text-align: left;
    >.aty-row {
         padding: 20px 0;
     }
    }
</style>
